<link rel="stylesheet" href="/css/tableStyle.css">
<style scoped>
    #sourceMaterial {
        background-color: #fff;
        min-height: 80vh;
        position: relative;
    }

    .top-view {
        display: flex;
        align-items: center;
        padding: 15px;
    }

    .material-list {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 20px;
        padding-bottom: 50px;
    }

    .material-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #000;
    }

    .material-item :hover {
        color: #337ab7;
    }

    .material-item img {
        width: 80%;
    }

    .material-item .material-info {
        transform: translateY(-10px);
        text-align: center;
    }

    .paging-view {
        position: absolute;
        bottom: 0;
        right: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .ycxq-paging button:active {
        background: #337ab7;
    }

    .ycxq-paging .activity {
        color: #ffffff;
        background: #337ab7;
    }
</style>

<div id="sourceMaterial">
    <div class="top-view">
        <button class="btn btn-dropbox">
            <i class="fa fa-filter"></i><span class="hidden-xs">筛选</span>
        </button>
    </div>

    <div class="material-list">
        <a class="material-item" v-for="item in list" :key="item.serial_number"
            :href="'/admin/sourceMaterial/detail/' + item.serial_number + '?account=' + item.user_mobile"
            target="_self">
            <img src="/imgs/sourceMaterial/file-icon.png" />
            <div class="material-info">
                <div>@{{ item.user_mobile }}</div>
                <div>@{{ item.add_at }}</div>
            </div>
        </a>
    </div>

    <div class="paging-view">
        <span>显示</span>
        <div class="paging-range">
            <select class="form-control" v-model="query.limit">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
            </select>
        </div>
        <span>条</span>
        <div id="page" class="ycxq-paging"></div>
    </div>
</div>

<script src="/js/vue/vue-2.7.js"></script>
<script src="/js/pagination/paging.js"></script>
<script src="/js/utils/ajaxFunc.js"></script>
<script>
    const newAuth = '{{ $newAuth }}';

    const sourceMaterial = new Vue({
        el: '#sourceMaterial',
        data() {
            return {
                query: {
                    page: 1,
                    limit: 10,
                    totalPage: 0,
                },
                list: []
            }
        },
        watch: {
            'query.limit'() {
                this.getList()
            }
        },
        methods: {
            getList() {
                ajaxPostFunc('/v1/api/sourceMaterial/paging', this.query, {
                    'newAuth': newAuth
                }, res => {
                    this.list = res.data
                    this.query.totalPage = res.totalPage

                    $('#page').paging({
                        total: res.total,
                        numberPage: this.query.limit,
                        activePage: parseInt(this.query.page)
                    }, (page) => {
                        if (page != this.query.page) {
                            this.query.page = parseInt(page)
                            this.getList()
                        }
                    })
                })
            }
        },
        mounted() {
            this.getList()
        }
    })
</script>
